<script setup lang="ts">
import { Tools,Monitor,DataBoard } from '@element-plus/icons-vue'
import {onMounted, reactive, ref, watch} from "vue";
import useWebSocket from './useWebSocket'
import { WsReadyState } from '@/utils/wsCore.ts'
import {ElMessage} from "element-plus";
import { useBaseStore } from '@/stores/base'
import SendPage from "./component/send.vue"
import ReceivePage from "./component/receive.vue"
import SettingPage from "./component/setting.vue"



const baseStore = useBaseStore()

const currentPage = ref("send")
const showSetting = ref(false)

const clickDesk = ()=>{
  showSetting.value = false
  if ( currentPage.value == 'send' ){
    currentPage.value = 'receive'
    return
  }
  if ( currentPage.value == 'receive' ){
    currentPage.value = 'send'
    return;
  }
}

onMounted(()=>{
})

const { status, send } = useWebSocket(baseStore.rtcConfig.wsAddr, {
  autoConnect: true,
  onMessage: (data) => {
    const msg = JSON.parse(data)
    switch (msg.type) {
      case "answer":
        sendPageRef.value.setAnswer(msg.content)
        break
      case "offer":
        receivePageRef.value.initAnswer(msg.content)
        break
      case "roomId":
        baseStore.rtcSession.roomId = msg.content
        // 发送注册信息
        send({type:"register",content: msg.content+"_offer" })
        break
      case 'ping':
        break
      default:
        ElMessage.error('未知消息：' + data)
        break
    }
  },
})

watch( status,(newVal,_)=>{
  baseStore.rtcSession.status.wsStatus = newVal == WsReadyState.OPEN;
} )


const sendPageRef = ref()
const receivePageRef = ref()


</script>

<template>
  <div class="h-full">
    <!--rtc 状态标题区域-->
    <div class="flex justify-between items-center ">
      <div class="flex items-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-lg bg-gradient-to-r from-col2 to-col1 cursor-pointer"
             @click="clickDesk">
          <el-icon size="26" color="white" v-show=" currentPage=='send' " ><Monitor /></el-icon>
          <el-icon size="26" color="white" v-show=" currentPage=='receive'  "><DataBoard /></el-icon>
        </div>
        <div class="inline-block ml-2">
          <div>
            <p class="font-bold">{{ baseStore.rtcSession.status.title }}</p>
          </div>
          <div>
            <el-text>
              {{ baseStore.rtcSession.status.titleDescription }}
            </el-text>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-lg bg-gradient-to-r to-col1 from-col2 cursor-pointer"
             @click="showSetting=!showSetting"
        >
          <el-icon size="26" color="white" ><Tools /></el-icon>
        </div>
        <div class="ml-2">
          <el-text tag="b">{{baseStore.rtcSession.status.sharing?"分享中":"未连接"}}</el-text>
          <br/>
          <el-text >{{ baseStore.rtcSession.status.connDescription }}</el-text>
          <div>
            <el-text>
              ws
              <el-text type="success" v-show="baseStore.rtcSession.status.wsStatus">已连接</el-text>
              <el-text type="info" v-show="!baseStore.rtcSession.status.wsStatus">未连接</el-text>
              <el-divider direction="vertical" />
              rtc
              <el-text type="success" v-show="baseStore.rtcSession.status.rtcStatus">已连接</el-text>
              <el-text type="info" v-show="!baseStore.rtcSession.status.rtcStatus">未连接</el-text>
            </el-text>
          </div>
        </div>
      </div>
    </div>
    <el-divider />
    <!--    内容区域-->
    <SettingPage v-show="showSetting"></SettingPage>
    <div v-show="!showSetting">
      <SendPage v-if="currentPage =='send' " :wsSendMessage="send"  ref="sendPageRef"></SendPage>
      <ReceivePage v-else :wsSendMessage="send" ref="receivePageRef"></ReceivePage>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
